<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>恒铸智能柜管理平台</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport"
	content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/MUI/css/mui.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/css/leg-table.css">
<script
	src="${pageContext.request.contextPath}/resources/MUI/js/mui.min.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/js/jquery-1.4.4.min.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/js/leg-table.js"></script>

<style>
a {
	text-decoration: none !important;
}

html, body {
	background-color: #efeff4;
}

p {
	text-indent: 22px;
}

span.mui-icon {
	font-size: 14px;
	color: #007aff;
	margin-left: -15px;
	padding-right: 10px;
}

.mui-off-canvas-left {
	color: #fff;
}

.title {
	margin: 35px 15px 10px;
}

.title+.content {
	margin: 10px 15px 35px;
	color: #bbb;
	text-indent: 1em;
	font-size: 14px;
	line-height: 24px;
}

input {
	color: #000;
}
.loading{
	text-align:center;
	line-height:50px;
	color:gray;
}
.mui-collapse-content a {
	color: white;
}

/* 	.mui-iframe-wrapper {
	
		z-index: 1;
	}
 */
.mui-scroll {
	top: 50px
}

/* 提示框位置 */
.mui-toast-container {
	bottom: 50%;
}

/* top */
.mui-bar .mui-title {
	left: 70px;
	width: 66%;
}

/* 必填* */
.must {
	color: red;
	position: absolute;
	right: 10px;
	top: 12px;
}

/* 添加 */
#Add {
	top: 50px;
	right: -14px;
	font-size: 14px;
	float: right;
	z-index: 9;
	display: none;
	background-color: #ffffff8a !important;
}

@
-webkit-keyframes progress-done-pre { 0% {
	transform: scale(1);
	opacity: inherit;
}

50%
{
transform
:
 
scale
(1
.25
);

			
opacity
:
 
.9
;

		
}
60%{
transform
:
 
scale
(1);

			
opacity
:
 
.5
;

		
}
98%{
transform
:
 
scale
(
.5
);

			
opacity
:
 
0;
}
100%
{
opacity
:
 
0;
height
:
 
0
px
;

		    
margin
:
 
0;
}
}
@
keyframes progress-done-pre { 0% {
	transform: scale(1);
	opacity: inherit;
}

50%
{
transform
:
 
scale
(1
.25
);

			
opacity
:
 
.9
;

		
}
60%{
transform
:
 
scale
(1);

			
opacity
:
 
.5
;

		
}
98%{
transform
:
 
scale
(
.5
);

			
opacity
:
 
0;
}
100%
{
opacity
:
 
0;
margin
:
 
0;
}
}
@
keyframes progress-font-done { 0% {
	font-size: 17px;
	opacity: inherit;
}

50%
{
font-size
:
 
12
px
;

			
opacity
:
 
.2
;

		
}
100%
{
font-size
:
 
17
px
;

			
opacity
:
 
inherit
;

		
}
}
@
-webkit-keyframes progress-font-done { 0% {
	font-size: 17px;
	opacity: inherit;
}
50%
{
font-size
:
 
12
px
;

			
opacity
:
 
.2
;

		
}
100%
{
font-size
:
 
17
px
;

			
opacity
:
 
inherit
;

		
}
}
.upTop{
	position:fixed;
	z-index:2;
	left:82%;
	top:80%;
	background: white;
	padding:8px;
	border-radius: 50%;
	box-shadow: 1px 2px 5px #bdbdbd;
	display: none;
}
</style>
</head>

<body>
	<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
		<aside id="offCanvasSide" class="mui-off-canvas-left">
			<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
				<a class="mui-btn mui-btn-danger" id="logout"
					style="width: 100%; border-radius: 0; margin: 0px;"><img
					src="/resources/images/tuichu.png"><cite>注销</cite></a>
				<div class="mui-scroll" id="menu"></div>
			</div>
		</aside>

		<div class="mui-inner-wrap">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-icon mui-icon-left-nav mui-pull-left"><span
					style="font-size: 17px;">首页</span></a>
				<h1 class="mui-title">恒铸智能柜管理平台</h1>
				<a href="#offCanvasSide"
					class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
				<a id="Add" class="mui-btn mui-icon mui-icon-plus mui-right">添加</a>
			</header>

			<div id="offCanvasContentScroll"
				class="mui-content mui-scroll-wrapper">
				<!-- 子页面  -->
				 <div class="upTop">
		    		<i class="layui-icon layui-icon-top" style="font-size: 35px; color: #1E9FFF;"></i>
			    </div>
				<div class="mui-scroll">
					<style>
.MyInfor {
	border: 1px solid white;
	border-radius: 5px;
	box-shadow: 0px 0px 25px -5px rgb(0, 0, 0);
	display: block;
	width: 90%;
	height: 200px;
	margin: 2% 5% 2% 5%;
	background-color: #ffffffab;
}

.MyInfor span {
	width: 32%;
	display: inline-grid;
	text-align: center;
}

.MyInfor span b {
	padding: 10px;
	text-align: center;
}
</style>
					<div class="MyInfor">
						<h4 style="margin: auto; display: black; width: 100px;">
							<b style="margin: 20px 0px; display: block; text-align: center;">我的设备</b>
						</h4>
						<span>箱子总数<b style="color: #01AAED">${num.allNum }</b></span> <span>异常数<b
							style="color: #FF5722">${num.errorNum }</b></span> <span
							class="border-right">异常率<b style="color: #009688">${num.errorRate}%</b></span>
						</br> <span>已使用数<b style="color: #01AAED">${num.usedNum }</b></span> <span>未使用数<b
							style="color: #FF5722">${num.unusedNum }</b></span> <span
							class="border-right">使用率<b style="color: #009688">${num.usageRate}%</b></span>
					</div>
					<style type="text/css">
.result-xy {
	height: 248px;
	width: 90%;
	max-width: calc(100% - 40px);
	margin: auto;
	margin-top: 10px;
	font-size: 0;
	border-top: 1px solid #E0E2E6;
	border-bottom: 1px solid #E0E2E6;
	background: linear-gradient(to top, #E0E2E6, #E0E2E6 1px, transparent 1px);
	background-size: 100% 50px;
	position: relative;
	text-align: center;
}
/* .result-xy::after {content: '100\A 80\A 60\A 40\A 20 \A 0';white-space: pre-wrap;position: absolute;font-size: 14px;line-height: 50px;top: -26px; left: -1.5em;} */
.result-bg {
	display: inline-block;
	height: 100%;
	position: relative;
	top: 5px;
}

.result-bg+.result-bg {
	margin-left: 16.66%;
}

.result-bg::after {
	content: attr(data-month);
	position: absolute;
	bottom: -2em;
	left: -3em;
	width: 70px;
	text-align: center;
	font-size: 12px;
	color: gray;
}

.result-bar {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
}

.result-bar>s {
	position: absolute;
	width: 6px;
	height: 6px;
	background-color: #fff;
	color: #01AAED;
	border: 2px solid;
	border-radius: 50%;
	top: 15px;
	left: 0;
	right: 0;
}

.result-bar i[line] {
	position: absolute;
	box-sizing: border-box;
	border-left: 3px solid #fff;
	border-right: 3px solid #fff;
	height: 2px;
	background-color: #01AAED;
	transform-origin: left center;
	left: 50%;
	top: 50%;
	margin-top: -1px;
	-ms-pointer-events: none;
	pointer-events: none;
	z-index: 1;
}

.result-bar input {
	font-size: xx-small;
	border: 0px;
	background-color: #efeff4;
	z-index: 99999;
	text-align: center;
	width: 40px;
	color: red;
	margin-left: -20px;
}
</style>
					<h4
						style="margin: auto; display: black; width: 160px; padding-bottom: 8px;">近七日使用统计图</h4>
					<div id="chartX" class="result-xy">
						<c:forEach items="${list }" var="item">
							<div class="result-bg" data-month="${item.today.split('-')[2]}">
								<span class="result-bar" style="height: ${item.num/max*100}%"><s
									title="${item.num}"></s><input value="${item.num}" disabled></input></span>
							</div>
						</c:forEach>
					</div>
				</div>
				<!-- <div class="page pagination" id="pagination"></div> -->
			</div>
			<!-- off-canvas backdrop -->
			<div class="mui-off-canvas-backdrop"></div>
		</div>
	</div>
	<script>
		function pagination(pageAll,count,pageNum,param){
			//判断pageNum是几个参数，在获取页数
			if((pageNum+"").search("&") != -1 ){
				pageNum = pageNum.split("&")[0];
			}

			new Page({
		        id: 'pagination',
		        pageTotal: pageAll, //必填,总页数
		        pageAmount: 10,  //每页多少条
		        dataTotal: count, //总共多少条数据
		        curPage: pageNum, //初始页码,不填默认为1
		        pageSize: 3, //分页个数,不填默认为5
		        showPageTotalFlag:false, //是否显示数据统计,不填默认不显示
		        showSkipInputFlag:false, //是否支持跳转,不填默认不显示
		        getPage: function (page) {
		            //获取当前页数
		            pageNum = page;
		        	stateList(pageNum+param)
		        	mui('#offCanvasContentScroll').scroll().scrollTo(0,0);
		        }
		    })
		}
	
		$(".mui-inner-wrap").on("touchstart","header .mui-icon-left-nav",function(){
			sessionStorage.setItem('url','/main/index');
			url = "/main/index";
			window.location.href=url;
		})

		$("#logout").on("touchstart",function(){
			sessionStorage.setItem("url","/main/index") 
			window.location.href= "/logout";
		})
		
		//主页
		var eleDots = document.querySelectorAll('#chartX s');
		
		// 这个是折线方法
		var fnLineChart = function (eles) {
		    [].slice.call(eles).forEach(function (ele, index) {
		        var eleNext = eleDots[index + 1];
		        if (!eleNext) { return;  }
		        var eleLine = ele.querySelector('i');
		        if (!eleLine) {
		            eleLine = document.createElement('i');
		            eleLine.setAttribute('line', '');
		            ele.appendChild(eleLine);
		        }
		        // 记录坐标
		        var boundThis = ele.getBoundingClientRect();
		        // 下一个点的坐标
		        var boundNext = eleNext.getBoundingClientRect();
		        // 计算长度和旋转角度
		        var x1 = boundThis.left, y1 = boundThis.top;
		        var x2 = boundNext.left, y2 = boundNext.top;
		        // 长度
		        var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
		        // 弧度(角度)
		        var radius = Math.atan((y2 - y1) / (x2 - x1));
		        // 设置线条样式
		        eleLine.style.width = distance + 'px';
		        eleLine.style.msTransform = 'rotate('+ radius +'rad)';
		        eleLine.style.transform = 'rotate('+ radius +'rad)';
		    });
		};
		
		// 调用折线方法
		fnLineChart(eleDots);
		
		/* ----------------主页结束---------------------------- */
		
		mui.init();
		var offCanvasWrapper = mui('#offCanvasWrapper');
		var moveTogether = true;

		var menu;

		//获取菜单
		mui.post("/main/getMenu",function(res) {
			let menuList = res.contentManagement;
			menu = '<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">';

			for (var i = 0; i < menuList.length; i++) {
				menu += '<li class="mui-table-view-cell mui-collapse">'
						+ '<a class="mui-navigate-right" href="'+menuList[i].href+'">'
						+ menuList[i].title + '</a>';
				if (menuList[i].children.length > 0
						&& menuList[i].children != undefined) {
					for (var j = 0; j < menuList[i].children.length; j++) {
						menu += '<div class="mui-collapse-content" style="background-color: #242424 !important;padding-left: 30px !important;width: 130%;">'
								+ '<a href="'+menuList[i].children[j].href+'">'
								+ menuList[i].children[j].title
								+ '</a>' + '</div>';
					}
				}
				menu += '</li>';
			}
			menu += '</ul>';
			$("#menu").append(menu)
		})
		var a = 0;
		$(".mui-title").html("恒铸智能柜管理平台")
		mui("#offCanvasSideScroll").on("tap", "ul li div", function() {
			offCanvasWrapper.offCanvas('close');
			let url = $(this).children('a').attr("href");
			sessionStorage.setItem("url",url)
			window.location.hash = url;
			if(a == 0){
				a=1;				
				window.location.reload();
			}
		})

	    mui('#offCanvasSideScroll').scroll();
		mui('#offCanvasContentScroll').scroll();

	</script>
	<script type="text/javascript">
		//刷新自己的页面哦通过session  url
		let url = sessionStorage.getItem('url')
		if(url != "/main/index"){
			$("#offCanvasContentScroll .mui-scroll").load(url)
		}

		function btnStatus(hash) {
			sessionStorage.setItem("url",hash)
			$("#offCanvasContentScroll .mui-scroll").load(hash)
		}
		
		//跳转到修改信息//history
		function onHashChange() {
			var curHash = window.location.hash.replace("#", "");
			if(curHash) {
				btnStatus(curHash);
				//sendAjax(curHash);
			}
		}
		
	   window.addEventListener("popstate", function(e) { 
		   window.onhashchange = onHashChange;
		   $("#Add").hide();
	   }, false); 
	</script>
	<script type="text/javascript">
		//置顶
		mui(document).on('tap', '.upTop', function(e){
			$(".mui-inner-wrap .mui-scroll").css("transform","translate3d(0px, -0px, 0px) translateZ(0px)");
			mui('.mui-inner-wrap .mui-scroll-wrapper').scroll().y=0; 
			$(".upTop").hide();
		});
	</script>
</body>

</html>